<template>
    <div
        class="installmentDataList"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="特色业务-->汽车分期资料查询">
            <template slot="cardBody">
                <div class="details">
                    <el-row class="line">
                        <span class="title">账户类别：</span>
                        <span class="text">{{ accountType }}</span>
                    </el-row>
                    <el-row class="line">
                        <span class="title">主卡卡号：</span>
                        <span class="text">{{ cardInfo_3004.CARDNO }}</span>
                    </el-row>
                    <el-row class="line">
                        <span class="title">申请转入的银行卡号：</span>
                        <span class="text">{{ infoData.CARDNAME }}</span>
                    </el-row>
                    <el-row class="line">
                        <span class="title">申请转入的银行卡持卡人姓名：</span>
                        <span class="text">{{ infoData.CUSTRNAME }}</span>
                    </el-row>
                    <el-row class="line">
                        <span class="title">申请转入的银行行号：</span>
                        <span class="text">{{ infoData.BANKNO }}</span>
                    </el-row>
                    <el-row class="line">
                        <span class="title">申请转入的银行卡银行名称：</span>
                        <span class="text">{{ infoData.CARDBANK }}</span>
                    </el-row>
                    <el-row class="line">
                        <span class="title">申请转入的银行卡卡片有效期：</span>
                        <span class="text">{{ infoData.CARDEXP + '（MMYY）'}}</span>
                    </el-row>
                </div>
                <div class="buttonBox"></div>
            </template>
        </cardComponent>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import { getAccountTypeName, itoStr, getDictMappingValue } from '@/utils/Common';
// import moment from 'moment'
import cardComponent from '@/components/cardComponent/cardComponent.vue';

export default {
    name: 'installmentDataList',
    components: {
        cardComponent,
    },
    data() {
        return {
            pageLoading: false, // 页面loading
            accountType: '', // 账户类别
            infoData: {
                CARDNAME: '', // 申请转入的银行卡号
                CUSTRNAME: '', // 申请转入的银行卡持卡人姓名
                BANKNO: '', // 申请转入的银行行号
                CARDBANK: '', //  申请转入的银行卡银行名称
                CARDEXP: '', // 申请转入的银行卡卡片有效期
            },
        };
    },

    // 取缓存信息
    computed: mapState({
        cardList_3601: state => state.common.cardList_3601, // 卡列表信息
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
    }),

    async mounted() {
        this.getInitData();
        // 查询数据库字典 获取 卡账户类别
        this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this);
    },

    filters: {
        // 格式化日期
        // getFormatDate(val) {
        //     let time = '--'
        //     if (val) {
        //         time = moment(1201 + '').format('MM/YY') + '（MM/YY）'
        //     }
        //     return time
        // }
    },

    methods: {
        // 获取账户类别
        // async handleGetAccountType() {
        //  this.accountType = await getDictMappingValue( "CATE",this.cardInfo_3004.CATEGORY,this) || this.cardInfo_3004.CATEGORY;
        // let params = {}
        // this.cardList_3601.forEach( item => {
        //     if (item.CARDNBR === this.cardInfo_3004.CARDNO) {
        //         let CATE = item.CATEGORY + ''
        //         params = {
        //             detailCode: CATE.substr(0, 1),
        //             dictValue: 'CATE'
        //         }
        //         return
        //     }
        // })
        // this.$post.Dict.dataBaseDict(params).then( res => {
        //     if (res.status === 200) {
        //         this.accountType = res.data.content
        //     } else {
        //         that.$message.error(res.data.msg);
        //     }
        // })
        // },

        // 获取初始化列表数据 4075交易
        getInitData() {
            this.pageLoading = true;
            // console.log(this.defaulaCardInfo, 'defaulaCardInfo')
            // 设置请求参数 -- 3052 交易
            const appBody = {
                INQOPT: 1, // 查询方式
                CARDNBR: this.cardInfo_3004.CARDNO, // 卡号
                PINFLAG: this.pinFlag, // 是否检查密码标志 0-不检查
            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            // console.log(this.defaultParams, 'this.defaultParams')
            params.body.appHead.tranCode = '3052';
            params.body.appBody = appBody;

            // 跑 3052 交易
            this.$post.common.transPort(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result--3052');
                    if (result.sysHead.rspCd === '000000') {
                        for (const key in this.infoData) {
                            // 赋值
                            this.infoData[key] = result.body.appBody[key];
                            console.log(key, this.infoData.CARDEXP);
                            if (key === 'CARDEXP') this.infoData.CARDEXP = itoStr(this.infoData.CARDEXP, 4);
                        }
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, result.sysHead.rspDesc, {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alert('请求失败!', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },

    },

};
</script>

<style lang="scss" scoped>
.installmentDataList {
    min-height: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;

    .pageTitle {
        font-size: 18px;
        color: #3578f6;
        margin-bottom: 30px;
        text-align: left;
    }

    .details {
        .line {
            height: 50px;
            line-height: 50px;
            text-align: left;
            display: flex;
            font-size: 14px;
            border: none !important;
            .title,
            .text {
                flex: 1;
            }

            .title {
                display: inline-block;
                text-align: right;
                width: 400px;
                margin-right: 10px;
                color: #999;
            }
        }
    }

    .buttonBox {
        margin: 50px 0 30px;
    }
}
</style>
